<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角演示 - Flask版本</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <style>
        .demo-radius {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -6px;
            box-sizing: border-box;
        }
        .radius-item {
            padding: 0 6px;
            margin-bottom: 24px;
            width: 25%;
            box-sizing: border-box;
        }
        @media (max-width: 768px) {
            .radius-item {
                width: 50%;
            }
        }
        .demo-radius .title {
            color: #606266;
            font-size: 18px;
            margin: 10px 0;
        }
        .demo-radius .value {
            color: #303133;
            font-size: 16px;
            margin: 10px 0;
        }
        .demo-radius .value code {
            background-color: #f5f7fa;
            padding: 4px 8px;
            border-radius: 4px;
            font-family: monospace;
        }
        .demo-radius .radius {
            height: 40px;
            width: 70%;
            border: 1px solid #dcdfe6;
            border-radius: 0;
            margin-top: 20px;
        }
        .radius-round {
            border-radius: var(--el-border-radius-round) !important;
        }
        .radius-base {
            border-radius: var(--el-border-radius-base) !important;
        }
        .radius-small {
            border-radius: var(--el-border-radius-small) !important;
        }
        .page-title {
            text-align: center;
            margin: 20px 0 30px;
            color: #409EFF;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="page-title">Element Plus 圆角演示 (Flask版本)</h1>

        <div class="demo-radius">
            <!-- 无圆角 -->
            <div class="radius-item">
                <div class="title">No Radius</div>
                <div class="value">
                    <code>border-radius: "0px"</code>
                </div>
                <div class="radius"></div>
            </div>

            <!-- 小圆角 -->
            <div class="radius-item">
                <div class="title">Small Radius</div>
                <div class="value">
                    <code>border-radius: var(--el-border-radius-small)</code>
                </div>
                <div class="radius radius-small"></div>
            </div>

            <!-- 大圆角 -->
            <div class="radius-item">
                <div class="title">Large Radius</div>
                <div class="value">
                    <code>border-radius: var(--el-border-radius-base)</code>
                </div>
                <div class="radius radius-base"></div>
            </div>

            <!-- 圆形圆角 -->
            <div class="radius-item">
                <div class="title">Round Radius</div>
                <div class="value">
                    <code>border-radius: var(--el-border-radius-round)</code>
                </div>
                <div class="radius radius-round"></div>
            </div>
        </div>

        <div style="margin-top: 40px; padding: 20px; background-color: #f5f7fa; border-radius: 4px;">
            <h3>说明：</h3>
            <p>这是一个为 Flask 框架适配的静态 HTML 页面，展示了 Element Plus 的圆角样式。</p>
            <p>在实际的 Flask 应用中，您可以使用 Jinja2 模板语法动态生成内容：</p>
            <pre><code>{% for radius in radius_group %}
    &lt;div class="radius-item"&gt;
        &lt;div class="title"&gt;{{ radius.name }}&lt;/div&gt;
        &lt;div class="value"&gt;
            &lt;code&gt;border-radius: {{ radius.value }}&lt;/code&gt;
        &lt;/div&gt;
        &lt;div class="radius {{ radius.class }}"&gt;&lt;/div&gt;
    &lt;/div&gt;
{% endfor %}</code></pre>
        </div>
    </div>
</body>
</html>
